import React, { useState, useEffect } from 'react'
import { useObserver } from 'mobx-react-lite'
import useStore from '../../context/useStore'
import { useHistory } from 'react-router-dom'
import './ModifyPhone.scss'
const ModifyPhone: React.FC = () => {
  let history = useHistory()
  let { my } = useStore()
  //手机号
  let [phone, setPhone] = useState<string>('')
  //验证码
  let [code, setCode] = useState<string>('')
  //正则
  var reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/; 
  //返回上一页
  function back() {
    history.goBack()
  }
  //change 事件  
  function Telephone(e) {
    setPhone(e.target.value)
  }
  useEffect(() => {
    //my.getInfo()
    // console.log( my.getInfo())
  },[])
  //获取验证码
  async function sendCode() {
    if (reg_tel.test(phone)) {
      my.getMyPhone(phone)
    }
  }
  //修改手机号
  function setMyPhone() {
    my.setPhone(code)
    history.push('/index/my')
}
  return useObserver(() =>
    <div className="modifyphone">
       <div className="head">
          <span onClick={back}>{'<'}</span>
          <h3>手机号换绑</h3>
      </div>
      <div className="body">
        <div className="newPhoneBox">
        <input type="number" placeholder="请输入绑定的手机号" value={phone} onChange={e => setPhone(e.target.value)} className="newphone"/>
        </div>
        <div className="yzmBox">
        <input type="number" maxLength={6} placeholder="请输入验证码"  value={code} onChange={Telephone} className="yzm"/> 
            <span onClick={sendCode} className="getyzm">{my.num !== 60 ? my.num : '发送验证码'}</span>
        </div>
        <div  className="okBox">
           <span className="okBtn"  onClick={setMyPhone} >提交</span>
        </div>
      </div>
    </div>
  )
}
export default ModifyPhone